<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
    <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
        <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
    </ion-button>
    } @else {
    <core-context-menu>
        <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
            iconAction="fas-circle-info" />
    </core-context-menu>
    }
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline"
        (completionChanged)="onCompletionChange()" />

    <!-- Survey already done -->
    <ion-card class="core-success-card" *ngIf="survey && survey.surveydone">
        <ion-item>
            <ion-icon name="fas-check" slot="start" aria-hidden="true" />
            <ion-label>
                {{ 'addon.mod_survey.surveycompletednograph' | translate }}
            </ion-label>
        </ion-item>
    </ion-card>

    <!-- Survey questions -->
    <form *ngIf="survey && !survey.surveydone && !hasOffline && questions && questions.length">

        <ion-grid class="ion-no-padding ion-text-wrap">
            <ng-container *ngFor="let question of questions; let questionIndex=index; let isEven=even;"
                class="ion-no-padding ion-text-wrap">
                <!-- Parent question (Category header) -->
                <ng-container *ngIf="question.multiArray?.length">
                    <h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex === 1">{{ question.text }}</h3>
                    <ion-row class="ion-align-items-center ion-hide-md-down ion-padding">
                        <ion-col size="7" class="ion-padding">{{ 'addon.mod_survey.responses' | translate }}</ion-col>
                        <ion-col size="1" class="ion-text-center option-name"
                            *ngFor="let option of question.optionsArray; let indexOption=index;">
                            {{ option }}
                        </ion-col>
                    </ion-row>
                    <ion-item class="ion-text-wrap addon-mod_survey-question" [class.even]="isEven" lines="full">
                        <ion-label>
                            <p>{{ question.intro }}</p>
                        </ion-label>
                    </ion-item>
                </ng-container>

                <!-- Subquestion -->
                <ng-container *ngIf="question.parent !== 0">
                    <ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name">
                        <ion-row class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">

                            <ion-col size="7">
                                <span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
                                    <strong>{{question.num}}.</strong> {{ question.text }}
                                </span>
                            </ion-col>

                            <!-- Tablet view: radio buttons -->
                            <ion-col class="ion-hide-md-down ion-text-center" size="1"
                                *ngFor="let option of question.optionsArray; let value=index;">
                                <!-- Empty slot to avoid errors on migration tslint checks -->
                                <ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option" />
                            </ion-col>
                            <ion-col class="ion-hide-md-up" size="5">
                                <ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
                                    [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet"
                                    [name]="question.name" [cancelText]="'core.cancel' | translate"
                                    [interfaceOptions]="{header: question.text}">
                                    <ion-select-option value="-1" selected disabled>{{ 'core.choose' | translate }}</ion-select-option>
                                    <ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value +1">
                                        {{option}}
                                    </ion-select-option>
                                </ion-select>
                            </ion-col>
                        </ion-row>
                    </ion-radio-group>
                </ng-container>

                <!-- Single question (don't belong to a category) -->
                <ng-container *ngIf="(!question.multiArray || question.multiArray.length === 0) && question.parent === 0">
                    <ion-row class="ion-align-items-center ion-padding" *ngIf="question.type > 0" [class.even]="isEven">
                        <ion-col size="7">
                            <span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
                                <strong>{{question.num}}.</strong> {{ question.text }}
                            </span>
                        </ion-col>
                        <ion-col size="5">
                            <ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
                                [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet" [name]="question.name"
                                [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: question.text}">
                                <ion-select-option [value]="question.required ? '-1' : '0'" selected [disabled]="question.required">
                                    {{ 'core.choose' | translate }}
                                </ion-select-option>
                                <ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value +1">
                                    {{option}}
                                </ion-select-option>
                            </ion-select>
                        </ion-col>
                    </ion-row>

                    <ion-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven">
                        <ion-textarea labelPlacement="floating" [(ngModel)]="answers[question.name]" [name]="question.name"
                            [required]="question.required">
                            <p slot="label" [core-mark-required]="question.required">
                                <strong>{{question.num}}.</strong> {{ question.text }}
                            </p>
                        </ion-textarea>
                    </ion-item>
                </ng-container>

            </ng-container>
        </ion-grid>
    </form>

    <div collapsible-footer *ngIf="!showLoading" slot="fixed">
        <div class="list-item-limited-width" *ngIf="survey && (survey.surveydone || (!hasOffline && questions && questions.length))">
            <ion-button class="ion-text-wrap ion-margin" expand="block" [href]="module.url" core-link *ngIf="survey.surveydone">
                {{ 'addon.mod_survey.results' | translate }}
                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
            </ion-button>

            <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="submit()" [disabled]="!isValidResponse()"
                *ngIf="!survey.surveydone && !hasOffline && questions && questions.length">
                {{ 'core.submit' | translate }}
            </ion-button>
        </div>

        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
    </div>
</core-loading>
